<template>
  <div>
    <el-form :inline="true" style="height: 30px" @submit.native.prevent>
      <el-form-item>
        <company-product-series-cascade :dept-id="deptId" @change="productChange"/>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="deviceName"
          clearable
          :placeholder="$t('device')+$t('name')"
          @change="searchNameChange"
        />
      </el-form-item>
      <el-form-item>
        <el-select v-model="status" @change="statusChange">
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>

    <el-table
      :data="deviceList"
      style="width: 100%"
      @cell-click="getSensor"
    >
      <el-table-column

        prop="deviceCore"
        :label="$t('deviceCore')"
      />
      <el-table-column

        prop="deviceName"
        :label="$t('device')+$t('name')"
      />
      <el-table-column :label="$t('surplus')" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.surplus }}%</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" :label="$t('status')">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status=='ONLINE'?'success':'danger'">{{ formatDeviceStatus(scope.row) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column width="210">
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            @click.stop="edit(scope.row)"
          >{{ $t('info') }}
          </el-button>
          <el-button
            type="text"
            icon="el-icon-s-tools"
            @click.stop="deviceSetting(scope.row)"
          >{{ $t('setting') }}
          </el-button>
          <el-button
            style="color: #ff4e4e;"
            type="text"
            icon="el-icon-delete"
            @click.stop="updateDevice(scope.row)"
          >{{ $t('delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: right;margin: 15px 0">
      <el-pagination
        background
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog
      :visible.sync="showSetting"
      :title="device.deviceName"
      destroy-on-close
      append-to-body
      width="1200px"
      top="15px"
    >
      <device-setting
        :device-core="device.deviceCore"
        class="uni-scroll"
        style="height: 600px"
      />
    </el-dialog>

    <el-drawer
      append-to-body
      size="70%"
      :visible.sync="drawer"
      direction="rtl"
    >
      <div class="box-card" style="height: calc(100vh - 92px)">
        <div
          class="uni-scroll"
          style="height: calc(100vh - 100px)"
        >
          <sensor-camera-list :device="device"/>
        </div>
      </div>
    </el-drawer>

  </div>
</template>

<script>
import CompanyProductSeriesCascade from '@/components/CompanyProductSeriesCascade'
import { pageGetAllDeviceDetails, updateDevice } from '@/api/iot/iotDeviceApi'
import { formatDate, formatDeviceStatus, listDeviceStatus, successNotice } from '@/util/common'
import { getCompanyId, getPageSize, setPageSize } from '@/util/storage'
import DeviceSetting from '@/components/DeviceSetting'
import SensorCameraList from '@/components/SensorCameraList'

export default {
  name: 'CompanyDevice',
  components: {
    CompanyProductSeriesCascade,
    DeviceSetting,
    SensorCameraList
  },
  props: {
    companyId: {
      type: Number,
      default: null
    },
    deptId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      device: {},
      showSetting: false,
      drawer: false,
      deviceList: [],
      currentPage: 1,
      total: 0,
      pageSize: getPageSize(),
      deviceName: null,
      statusList: [],
      status: null,
      productId: null,
      seriesId: null
    }
  },
  created() {
    this.statusList = listDeviceStatus(this)
    if (this.companyId != null) {
      this.pageGetAllDeviceDetails()
    }
  }, methods: {
    getSensor(item) {
      this.device = item
      this.drawer = true
    },
    deviceSetting(item, index) {
      this.device = item
      this.showSetting = true
    },
    searchNameChange() {
      this.currentPage = 0
      this.pageGetAllDeviceDetails()
    },
    statusChange() {
      this.currentPage = 1
      this.pageGetAllDeviceDetails()
    },
    provinceCityChange(item) {
      this.provinceId = item.provinceId
      this.cityId = item.cityId
      this.currentPage = 1
      this.pageGetAllDeviceDetails()
    },
    productChange(val) {
      this.productId = val.productId
      this.seriesId = val.seriesId
      this.currentPage = 1
      this.pageGetAllDeviceDetails()
    },
    formatDeviceStatus(item) {
      const status = formatDeviceStatus(this, item.status)
      let time
      switch (item.status) {
        case 'ONLINE':
          time = this.formatDate(item.lastOnLineTimer)
          break
        default:
          time = this.formatDate(item.lastOffLineTimer)
      }
      return status + ' ' + time
    },
    updateDevice(item) {
      const that = this
      this.$confirm(this.$t('delete') + item.deviceName, {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          updateDevice({
            deviceCore: item.deviceCore,
            companyId: getCompanyId()
          }).then(res => {
            const { code } = res
            if (code === '200') {
              successNotice(that)
            }
            that.pageGetAllDeviceDetails()
          })
        })
    },
    edit(item) {
      this.device = item
      this.$router.push({
        path: '/device/manage/' + item.deviceCore,
        query: { deviceCore: item.deviceCore, deviceName: item.deviceName }
      })
    },
    formatDate(data) {
      return formatDate(this, data)
    },
    handleSizeChange(val) {
      this.pageSize = val
      setPageSize(this.pageSize)
      this.pageGetAllDeviceDetails()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.pageGetAllDeviceDetails()
    },
    pageGetAllDeviceDetails() {
      pageGetAllDeviceDetails({
        pageSize: this.pageSize,
        status: this.status,
        deviceName: this.deviceName,
        currentPage: this.currentPage,
        companyId: this.companyId,
        productId: this.productId,
        seriesId: this.seriesId,
        withInfo: true
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.total = data.total
          this.deviceList = data.data
        }
      })
    }
  }

}
</script>

